Skip to content

fix(vue-query): widen 'SkipToken' to 'symbol' so 'queryFn' type-checks as a 'computed' or inside a whole-options getter - #11427

Draft
sukvvon wants to merge 11 commits into
mainfrom
fix/vue-query-usequery-skiptoken-getter-typecheck
Draft

fix(vue-query): widen 'SkipToken' to 'symbol' so 'queryFn' type-checks as a 'computed' or inside a whole-options getter#11427
sukvvon wants to merge 11 commits into
mainfrom
fix/vue-query-usequery-skiptoken-getter-typecheck

Conversation

@sukvvon

@sukvvon sukvvon commented Sep 6, 2026

Copy link
Copy Markdown
Member

🎯 Changes

useQuery/queryOptions's whole-options getter overload (useQuery(() => ({...})) / queryOptions(() => ({...}))) failed to type-check the queryFn: cond ? fn : skipToken pattern shown in their own JSDoc examples.

Root cause: SkipToken is a unique symbol. When a function has more than one overload and the argument is a getter, TypeScript fails to propagate the contextual type into a ternary inside the getter's body, widening the ternary's unique symbol branch to plain symbol — which no longer matches any overload. This repo already has a fix for the same issue in useQueries.ts (SkipTokenForUseQueries = symbol).

The same widening needs to apply consistently everywhere queryFn is accepted as input, but useQuery.ts and queryOptions.ts each hand-wrote their own, independently-drifting mapped type for the options they accept, so queryOptions() didn't accept a computed queryFn at all (only useQuery's options type did), and a bare reactive getter for the whole queryKey array was accepted by queryOptions() but rejected by useQuery()/useQueries() for no principled reason (confirmed at runtime — cloneDeepUnref already resolves a bare-getter queryKey).

This PR:

  • Moves UseQueryOptions (previously defined ad hoc in useQuery.ts) into queryOptions.ts. QueryOptions stays the plain/output type — enabled/queryKey reactive, everything else (including queryFn) plain with unique symbol — so queryOptions()'s return value still satisfies QueryClient methods like fetchQuery/invalidateQueries that expect unique symbol, and so useQueries' type-level inference (which pattern-matches on a plain queryFn union) keeps working when a queryOptions() result is spread into it.
  • UseQueryOptions (the shared input type for useQuery, useQueries, useBaseQuery, and queryClient) sources its enabled/queryKey/queryFn mappings from QueryOptions, so the two can't drift apart again, and widens SkipToken to symbol only on queryFn there, so queryFn: cond ? fn : skipToken type-checks both inside a whole-options getter and as a computed.
  • queryOptions() keeps a narrower input than useQuery(): enabled/queryKey/queryFn accept a ref/computed/getter, every other option stays a plain value (e.g. staleTime: ref(...) is still rejected, and so is wrapping the whole options object in a ref) — the same shape queryOptions() already had, with queryFn added. Both rejections are pinned with @ts-expect-error regression tests.
  • Allows a bare reactive getter for the whole queryKey array on useQuery/useQueries (previously @ts-expect-error'd), matching what queryOptions() already accepted and what the runtime already resolves.
  • Adds runtime tests (useQuery.test.ts, useQueries.test.ts, useInfiniteQuery.test.ts) confirming a computed queryFn that flips to skipToken actually skips the query and re-runs once defined — not just a type-only check.
  • useInfiniteQuery/infiniteQueryOptions were checked for the same issue and found already correct (their options type wraps every property, including queryFn, in MaybeRefDeep as a whole); added regression tests (infiniteQueryOptions.test-d.ts, a runtime test in useInfiniteQuery.test.ts) rather than changing their types.

No other runtime behavior changes.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested code changes locally with pnpm run test:pr, or these tests do not apply to this pull request.
  • I fully understand the code in this pull request, including any code generated with AI assistance.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

@coderabbitai

coderabbitai Bot commented Sep 6, 2026

Copy link
Copy Markdown
Contributor

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

  • Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@sukvvon sukvvon self-assigned this Sep 6, 2026
@nx-cloud

nx-cloud Bot commented Sep 6, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit fa638d3

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ⏳ In Progress ... View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded <1s View ↗

☁️ Nx Cloud last updated this comment at 2026-09-07 03:04:52 UTC

@github-actions

github-actions Bot commented Sep 6, 2026

Copy link
Copy Markdown
Contributor

🚀 Changeset Version Preview

3 package(s) bumped directly, 22 bumped as dependents.

🟨 Minor bumps

Package Version Reason
@tanstack/svelte-query 6.1.48 → 6.2.0 Changeset
@tanstack/svelte-query-devtools 6.1.48 → 6.2.0 Dependent
@tanstack/svelte-query-persist-client 6.1.48 → 6.2.0 Dependent
@tanstack/vue-query-devtools 6.1.48 → 6.2.0 Dependent

🟩 Patch bumps

Package Version Reason
@tanstack/query-core 5.102.8 → 5.102.9 Changeset
@tanstack/vue-query 5.102.8 → 5.102.9 Changeset
@tanstack/angular-query-experimental 5.102.8 → 5.102.9 Dependent
@tanstack/angular-query-persist-client 5.102.8 → 5.102.9 Dependent
@tanstack/eslint-plugin-query 5.102.8 → 5.102.9 Dependent
@tanstack/lit-query 0.2.20 → 0.2.21 Dependent
@tanstack/preact-query 5.102.8 → 5.102.9 Dependent
@tanstack/preact-query-devtools 5.102.8 → 5.102.9 Dependent
@tanstack/preact-query-persist-client 5.102.8 → 5.102.9 Dependent
@tanstack/query-async-storage-persister 5.102.8 → 5.102.9 Dependent
@tanstack/query-broadcast-client-experimental 5.102.8 → 5.102.9 Dependent
@tanstack/query-devtools 5.102.8 → 5.102.9 Dependent
@tanstack/query-persist-client-core 5.102.8 → 5.102.9 Dependent
@tanstack/query-sync-storage-persister 5.102.8 → 5.102.9 Dependent
@tanstack/react-query 5.102.8 → 5.102.9 Dependent
@tanstack/react-query-devtools 5.102.8 → 5.102.9 Dependent
@tanstack/react-query-next-experimental 5.102.8 → 5.102.9 Dependent
@tanstack/react-query-persist-client 5.102.8 → 5.102.9 Dependent
@tanstack/solid-query 5.102.8 → 5.102.9 Dependent
@tanstack/solid-query-devtools 5.102.8 → 5.102.9 Dependent
@tanstack/solid-query-persist-client 5.102.8 → 5.102.9 Dependent

@pkg-pr-new

pkg-pr-new Bot commented Sep 6, 2026

Copy link
Copy Markdown
More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@11427

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@11427

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@11427

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@11427

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@11427

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@11427

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@11427

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@11427

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@11427

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@11427

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@11427

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@11427

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@11427

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@11427

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@11427

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@11427

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@11427

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@11427

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@11427

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@11427

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@11427

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@11427

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@11427

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@11427

commit: fa638d3

@github-actions

github-actions Bot commented Sep 6, 2026

Copy link
Copy Markdown
Contributor

size-limit report 📦

Path Size
react full 11.87 KB (0%)
react minimal 8.84 KB (0%)

@sukvvon sukvvon changed the title fix(vue-query): widen 'SkipToken' to 'symbol' so it type-checks inside a whole-options getter fix(vue-query): widen 'SkipToken' to 'symbol' so 'queryFn' type-checks as a 'computed' or inside a whole-options getter Sep 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant